export default class CCH5BulletScreenComponent {
  /**
   * @constructor cc播放器跑马灯构造函数
   * @param {String player 父节点}
   * @param {String text 跑马灯内容}
   * @param {Object style 跑马灯样式}
   * param {String bulletPosition 跑马灯所在的位置, 可能的值 'top', 'bottom' , 'random, 默认为 'random'}
   * param {String frequency 间隔多少秒跑一次}
   */
  constructor(player, text, style, bulletPosition = 'random', frequency = 0) {
    this.playerHTML = $(player)
    this.text = text
    this.style = style || { fontSize: '14px', color: '#fff' }
    this.html = $(`<div class="bullet-screen"></div>`)
    this.bulletPosition = bulletPosition
    this.frequency = frequency

    this.html.css({
      animationDelay: `${frequency}s`
    })
  }

  ready() {
    this.html.text(this.text)
    this.playerHTML.append(this.html)
    this.html.css({
      ...this.style
    })

    //字体高度
    var bulletHeight = this.html.height()

    //播放器高度
    var playerHeight = this.playerHTML.height()

    //字体距离播放器底部最大高度
    var maxHeight = playerHeight - bulletHeight

    if (this.bulletPosition === 'bottom') {
      this.html.css({
        bottom: 0
      })
    } else {
      let top = this.bulletPosition === 'top' ? '50px' : this.randomTop(maxHeight)
      this.html.css({
        top: top
      })
    }

    if (this.bulletPosition === 'random') {
      this.html.on('animationiteration', () => {
        this.html.css({
          top: this.randomTop(maxHeight)
        })
      })
    }

    // 设置间隔
    this.html.on('animationiteration', () => {
      this.html.css({
        animationPlayState: 'paused'
      })
      setTimeout(() => {
        this.html.css({
          animationPlayState: 'running'
        })
      }, this.frequency * 1000)
    })
  }

  playing() {
    console.log('play')
    this.html.css({
      animationPlayState: 'running'
    })
  }

  pause() {
    console.log('pause')
    /* this.html.css({
      animationPlayState: 'paused'
    }) */
  }

  randomTop(max) {
    return Math.floor(Math.random() * max) + 'px'
  }
}
